<template>
  <div class="big-box" ref="big">
    <!-- 导航栏 -->
    <van-nav-bar title="回复评论" class="nav" />
    <!-- 评论列表 -->
    <div ref="list">
      <!-- 当前要回复的评论 -->
      <div class="curComment">
        <div class="img">
          <img :src="curCom.aut_photo" alt="" />
        </div>
        <div class="content">
          <h5>{{ curCom.aut_name }}</h5>
          <p>{{ curCom.content }}</p>
          <p>{{ curCom.pubdate | fTime }}</p>
        </div>
      </div>
      <!-- 回复评论列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in replyList" :key="index">
          <div class="curComment">
            <div class="img">
              <img :src="item.aut_photo" alt="" />
            </div>
            <div class="content">
              <h5>{{ item.aut_name }}</h5>
              <p>{{ item.content }}</p>
              <p>{{ item.pubdate | fTime }}</p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <!-- 回复评论 -->
    <div class="pubCom">
      <van-field
        v-model.trim="pubValue"
        center
        clearable
        placeholder="请输入评论"
      >
        <template #button>
          <van-button size="small" type="info" @click="pubComment"
            >发布</van-button
          >
        </template>
      </van-field>
    </div>
  </div>
</template>
<script>
// 引入评论接口
import { giveComment, getComment } from "@/api/comment.js";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      replyList: [], //回复评论的内容
      pubValue: "", //输入框的值
      offset: null //翻页
    };
  },
  props: {
    curCom: {
      //父组件穿过来的当前评论数据
      type: Object
    }
  },
  methods: {
    onLoad() {
      this.getReplyList();
    },
    // 获取回复评论列表
    async getReplyList() {
      // let art_id = this.$route.params.id;
      try {
        const res = await getComment({
          type: "c",
          source: this.curCom.com_id.toString(),
          offset: this.offset
        });
        console.log(res, "444");
        if (res.data.data.results.length === 0) {
          this.finished = true;
          return;
        }
        this.replyList.push(...res.data.data.results);
        this.offset = res.data.data.last_id;
        // console.log(this.$parent,"父组件");
        // this.$emit("regetCom");
        this.loading = false;
      } catch (err) {
        console.log(err);
        this.finished = true;
        this.$toast("获取回复评论失败");
      }
    },
    //回复评论
    async pubComment() {
      // 获取输入框的值
      const value = this.pubValue;
      // 判断是否为空
      if (!value) {
        this.$toast("发布内容不能为空");
        return;
      }
      let target = this.curCom.com_id;
      let art_id = this.$route.params.id;
      // 调接口回复评论
      try {
        const res = await giveComment({
          target: target,
          content: value,
          art_id: art_id
        });
        // console.log(res,"222");
        // 成功将返回数据push进本地
        this.replyList.push(res.data.data.new_obj);
        // nextTick修改卷起的距离
        // this.$nextTick(()=>{
        //     // console.log(333);
        //     // this.$refs.list.scrollTop =  this.$refs.big.scrollHeight;
        //     // this.$emit('editscro');
        // });
      } catch (err) {
        console.log(err);
        // 失败提示
        this.$toast("回复评论失败");
      }
      // 清空输入框的值
      this.pubValue = "";
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.big-box {
  .nav {
    background-color: #1989fa;
  }
  .curComment {
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .img {
      width: 60px;
      height: 50px;
      margin: 0 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      h5 {
        margin: 0px;
        font-size: 15px;
      }
      p {
        margin: 0px;
        margin-top: 5px;
        font-size: 10px;
      }
    }
  }
  .pubCom {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}
</style>
